<template>
    <div class="cutImageContainer">
        <div class="model" v-show="model" @click="model = false">
            <div class="model-show">
                <img :src="modelSrc" alt="">
            </div>
        </div>
        <div class="cut">
            <vue-cropper ref="cropper" :img="getBase64" :output-size="option.outputSize" :output-type="option.outputType" :info="true" :full="option.full" :can-move="option.canMove" :can-move-box="option.canMoveBox" :fixed-box="option.fixedBox" :original="option.original"
                :auto-crop="option.autoCrop" :auto-crop-width="option.autoCropWidth" :auto-crop-height="option.autoCropHeight" :center-box="option.centerBox" @real-time="realTime" :high="option.high" @imgLoad="imgLoad"></vue-cropper>
        </div>
        <div class="test-button">
            <button @click="refreshCrop()" class="btn">刷新</button>
            <button @click="changeScale(1)" class="btn">放大</button>
            <button @click="changeScale(-1)" class="btn">缩小</button>
            <button @click="rotateLeft" class="btn">左旋转</button>
            <button @click="rotateRight" class="btn">右旋转</button>
            <button @click="finish('base64')" class="btn">预览</button>
            <a @click="down('base64')" class="btn" >确定</a>
            <button @click="cutImageDisplay()" class="btn">关闭</button>
        </div>
        <br/>
        <div>
          <span style="color: red">温馨提示：请自行调整照片朝向至横板，避免生成文书有误</span>
        </div>
        <div class="show-preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px',  'overflow': 'hidden', 'margin': '5px'}">
            <div :style="previews.div">
                <img :src="previews.url" :style="previews.img">
            </div>
        </div>
    </div>
</template>

<script>
    import * as vueCropper from 'vue-cropper'
    import { convertBase64UrlToFile } from '../utils/ImageUtil'
    export default {
        data() {
            return {
                model: false,
                modelSrc: '',
                crap: false,
                previews: {},
                option: {
                    // img: this.imagePath,
                    full: true,
                    outputSize: 0.8,
                    outputType: 'jpeg',
                    canMove: false,
                    fixedBox: false,
                    original: false,
                    canMoveBox: true,
                    autoCrop: true,
                    // 只有自动截图开启 宽度高度才生效
                    autoCropWidth: 0,
                    autoCropHeight: 0,
                    centerBox: false,
                    high: true
                },
                show: true
            }
        },
        computed: {
          getBase64() {
            return this.$store.state.imageBase.base64
          },
          getSign() {
            return this.$store.state.imageBase.sign
          },
          getFileSize() {
            return this.$store.state.imageBase.fileSize
          },
          getFileName() {
            return this.$store.state.imageBase.fileName
          }
        },
        components: {
            'vue-cropper': vueCropper.default
        },
        methods: {
            refreshCrop() {
                // clear
                this.$refs.cropper.refresh()
            },
            changeScale(num) {
                num = num || 1
                this.$refs.cropper.changeScale(num)
            },
            rotateLeft() {
                this.$refs.cropper.rotateLeft()
                this.imgLoad()
            },
            rotateRight() {
                this.$refs.cropper.rotateRight()
                this.imgLoad()
            },
            finish(type) {
                // 输出
                if (type === 'blob') {
                    this.$refs.cropper.getCropBlob((data) => {
                        var img = window.URL.createObjectURL(data)
                        this.model = true
                        this.modelSrc = img
                    })
                } else {
                    this.$refs.cropper.getCropData((data) => {
                        this.model = true
                        this.modelSrc = data
                    })
                }
            },
            // 实时预览函数
            realTime(data) {
                this.previews = data
            },
            down(type) {
                this.$refs.cropper.getCropData((data) => {
                  this.displayCut(data)
                  this.$store.dispatch('hideCutImage', { base64: data })
                })
            },
            imgLoad(msg) {
              let axisImg = this.$refs.cropper.getImgAxis()
              this.$refs.cropper.cropW = axisImg.x2 - axisImg.x1
              this.$refs.cropper.cropH = axisImg.y2 - axisImg.y1
              this.$refs.cropper.cropOffsertX = axisImg.x1
              this.$refs.cropper.cropOffsertY = axisImg.y1
            },
            cutImageDisplay() {
                this.displayCut(this.getBase64)
                this.$store.dispatch('hideCutImage')
            },
            async displayCut(result) {
               // const file = await this.cutImageCompress(result)
              const file = convertBase64UrlToFile(result, this.getFileName)
              console.log('压缩后照片大小：' + file.size)
              this.$store.dispatch('storeFile', { file })
            }
        },
      mounted() {
        if (this.getFileSize > (1024 * 1024)) {
          this.option.outputSize = 0.3
        } else if (this.getFileSize > (150 * 1024)) {
          this.option.outputSize = ((150 * 1024) / this.getFileSize)
        }
      }
    }
</script>

<style lang='scss' scoped>
    .cutImageContainer {
        width: 100%;
        position: fixed;
        background: rgba(255,255,255,.9);
      z-index: 9999;
      height: 100%;
      .buttonCutStyle {
        width: 30%;
      }
      * {
        margin: 0;
        padding: 0;
      }
      .cut {
        width: 90%;
        height: 50%;
        margin: 30px auto;
      }
      .c-item {
        max-width: 800px;
        margin: 10px auto;
        margin-top: 20px;
      }
      .content {
        margin: auto;
        max-width: 1200px;
        margin-bottom: 100px;
      }
      .test-button {
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
      }
      .btn {
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        background: #fff;
        border: 1px solid #c0ccda;
        color: #1f2d3d;
        text-align: center;
        box-sizing: border-box;
        outline: none;
        margin: 20px 10px 0px 0px;
        padding: 9px 15px;
        font-size: 14px;
        border-radius: 4px;
        color: #fff;
        background-color: #50bfff;
        border-color: #50bfff;
        transition: all .2s ease;
        text-decoration: none;
        user-select: none;
      }
      .des {
        line-height: 30px;
      }
      code.language-html {
        padding: 10px 20px;
        margin: 10px 0px;
        display: block;
        background-color: #333;
        color: #fff;
        overflow-x: auto;
        font-family: Consolas, Monaco, Droid, Sans, Mono, Source, Code, Pro, Menlo, Lucida, Sans, Type, Writer, Ubuntu, Mono;
        border-radius: 5px;
        white-space: pre;
      }
      .show-info {
        margin-bottom: 50px;
      }
      .show-info h2 {
        line-height: 50px;
      }
      /*.title, .title:hover, .title-focus, .title:visited {
                          color: black;
                        }*/
      .title {
        display: block;
        text-decoration: none;
        text-align: center;
        line-height: 1.5;
        margin: 20px 0px;
        background-image: -webkit-linear-gradient(left, #3498db, #f47920 10%, #d71345 20%, #f7acbc 30%, #ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%, #3498db);
        color: transparent;
        -webkit-background-clip: text;
        background-size: 200% 100%;
        animation: slide 5s infinite linear;
        font-size: 40px;
      }
      .test {
        height: 500px;
      }
      .model {
        position: fixed;
        z-index: 10;
        width: 100vw;
        height: 100vh;
        overflow: auto;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.8);
      }
      .model-show {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;
      }
      .model img {
        display: block;
        margin: auto;
        max-width: 80%;
        user-select: none;
        background-position: 0px 0px, 10px 10px;
        background-size: 20px 20px;
        background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%), linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);
      }
      .c-item {
        display: block;
        user-select: none;
      }
      @keyframes slide {
        0% {
          background-position: 0 0;
        }
        100% {
          background-position: -100% 0;
        }
      }
    }
</style>
